<template>
  <div>
    <div>
      <el-form :inline="true" :model="createForm" class="demo-form-inline" size="mini">
        <el-form-item label="昵称">
          <el-input v-model="createForm.room" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="create">创建用户</el-button>
        </el-form-item>
      </el-form>
      <el-divider/>
    </div>
    <div class="main">
      <el-container style="height: 400px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: dimgrey">
          <el-menu v-for="(friend, i) in friendList" class="friend" :key="i">
            <el-menu-item>
              <img class="avatar" :src="friend.avatar" alt=""/>
              <span>{{ friend.username }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: left; font-size: 18px; background-color: lightgrey;">
            <img class="avatar" src="../../assets/tan.jpg" alt=""/>
            <span>炭治郎</span>
          </el-header>

          <el-main>
            <div v-for="(msg, i) in msgList" :key="i">
              <div class="msg">
                <div v-if="msg.from === contact.id">
                  <div class="bubble-msg-left">
                    <span>{{ contact.username }}: </span>
                    <span>{{ msg.message }}</span>
                  </div>
                </div>
                <div v-else >
                  <div class="bubble-msg-right">
                    <span>{{ user.username }}: </span>
                    <span>{{ msg.message }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <el-form :model="chatFrom" class="demo-form-inline" size="mini">
                <el-form-item>
                  <el-input type="textarea" v-model="chatFrom.msg"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="send">发送</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-main>
        </el-container>
      </el-container>

    </div>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      createForm: {
        room: ''
      },
      chatFrom: {},
      msgList: [
        {from: "001", to:"002", message: "善益, 快跟上"},
        {from: "002", to:"001", message: "好的, 炭治郎"}
        ],
      friendList: [
        {avatar: "../../assets/sy.jpg", username: "善益", id: "002"},
        {avatar: "../../assets/mdz.jpg", username: "弥豆子", id: "003"},
        {avatar: "../../assets/yzz.jpg", username: "伊之助", id: "004"}
        ],
      contact: {id: "002", username: "善益", avatar: "../../assets/sy.jpg"},
      user: {id: "001", username: "炭治郎", avatar: "../../assets/tan.jpg"},
    }
  },
  methods: {
    create() {
      console.log('submit!');
    },
    add() {

    },
    send() {
      let msg = {from: this.user.id, to: this.contact.id, message: this.chatFrom.msg}
      this.msgList.push(msg)
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 40px;
}
</style>
